

<template>
  <Header></Header>
  <main class="main-content">
    <div class="container">
      <!-- 搜索区域 -->
      <section class="search-section">
        <h2 class="search-title">政策法规查询</h2>
        <form class="search-form">
          <input type="text" class="search-input" placeholder="请输入政策关键词...">
          <button type="submit" class="search-btn">搜索</button>
        </form>
        <div class="filter-options">
          <button class="filter-btn active">全部</button>
          <button class="filter-btn">国家政策</button>
          <button class="filter-btn">地方法规</button>
          <button class="filter-btn">财税扶持</button>
          <button class="filter-btn">科技创新</button>
          <button class="filter-btn">创业就业</button>
        </div>
      </section>

      <!-- 国家部委政策 -->
      <section class="policy-section">
        <div class="section-header">
          <div class="section-icon">🇨🇳</div>
          <h2 class="section-title">国家部委政策</h2>
        </div>
        <div class="policy-grid">
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">关于支持创新创业高质量发展的若干意见</h3>
              <div class="policy-date">发布日期：2023-07-20</div>
              <p class="policy-desc">为深入实施创新驱动发展战略，进一步激发市场活力和社会创造力，现就支持创新创业高质量发展提出以下意见...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">中小企业促进法实施细则</h3>
              <div class="policy-date">发布日期：2023-06-15</div>
              <p class="policy-desc">为贯彻落实《中华人民共和国中小企业促进法》，改善中小企业经营环境，保障中小企业公平参与市场竞争，制定本细则...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">关于促进科技型中小企业发展的若干措施</h3>
              <div class="policy-date">发布日期：2023-05-10</div>
              <p class="policy-desc">为进一步激发科技型中小企业创新活力，提升创新能力，培育壮大科技型中小企业群体，提出以下政策措施...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 河南省政策 -->
      <section class="policy-section">
        <div class="section-header">
          <div class="section-icon">🌾</div>
          <h2 class="section-title">河南省政策</h2>
        </div>
        <div class="policy-grid">
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">河南省促进中小企业发展条例</h3>
              <div class="policy-date">发布日期：2023-07-10</div>
              <p class="policy-desc">为优化中小企业经营环境，保障中小企业公平参与市场竞争，维护中小企业合法权益，促进中小企业健康发展，制定本条例...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">关于支持科技型中小企业发展的若干措施</h3>
              <div class="policy-date">发布日期：2023-06-05</div>
              <p class="policy-desc">为贯彻落实国家创新驱动发展战略，促进我省科技型中小企业高质量发展，提出以下政策措施...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">河南省科技创新驱动高质量发展实施方案</h3>
              <div class="policy-date">发布日期：2023-05-20</div>
              <p class="policy-desc">为深入实施创新驱动发展战略，加快推动科技创新与经济社会发展深度融合，制定本实施方案...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 濮阳市政策 -->
      <section class="policy-section">
        <div class="section-header">
          <div class="section-icon">🏙️</div>
          <h2 class="section-title">濮阳市政策</h2>
        </div>
        <div class="policy-grid">
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">濮阳市科技创新驱动高质量发展实施方案</h3>
              <div class="policy-date">发布日期：2023-06-20</div>
              <p class="policy-desc">为贯彻落实国家和省创新驱动发展战略，推动我市科技创新与经济社会发展深度融合，制定本实施方案...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">关于促进民营经济高质量发展的实施意见</h3>
              <div class="policy-date">发布日期：2023-05-15</div>
              <p class="policy-desc">为促进我市民营经济高质量发展，激发民营经济活力和创造力，提出以下实施意见...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">濮阳市支持创新创业平台建设若干政策</h3>
              <div class="policy-date">发布日期：2023-04-10</div>
              <p class="policy-desc">为加快我市创新创业平台建设，打造创新创业良好生态，制定以下政策措施...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 城乡一体化示范区政策 -->
      <section class="policy-section">
        <div class="section-header">
          <div class="section-icon">🏢</div>
          <h2 class="section-title">城乡一体化示范区政策</h2>
        </div>
        <div class="policy-grid">
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">城乡一体化示范区双创扶持办法</h3>
              <div class="policy-date">发布日期：2023-06-01</div>
              <p class="policy-desc">为促进示范区创新创业发展，营造良好创新创业环境，加快培育新动能，制定本办法...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">关于加快科技企业孵化器建设的实施意见</h3>
              <div class="policy-date">发布日期：2023-05-10</div>
              <p class="policy-desc">为加快我区科技企业孵化器建设，提升孵化服务能力，促进科技成果转化，提出以下实施意见...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
          <div class="policy-card">
            <div class="policy-image">📜</div>
            <div class="policy-content">
              <h3 class="policy-title">示范区支持高层次人才创新创业若干措施</h3>
              <div class="policy-date">发布日期：2023-04-05</div>
              <p class="policy-desc">为吸引和集聚高层次人才来示范区创新创业，推动示范区高质量发展，制定以下政策措施...</p>
              <a href="#" class="policy-link">查看详情 →</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 政策解读 -->
      <section class="interpretation-section">
        <h2 class="interpretation-title">政策解读</h2>
        <div class="interpretation-grid">
          <div class="interpretation-item">
            <h3 class="interpretation-item-title">《关于支持创新创业高质量发展的若干意见》解读</h3>
            <div class="interpretation-item-date">2023-08-10</div>
          </div>
          <div class="interpretation-item">
            <h3 class="interpretation-item-title">《河南省促进中小企业发展条例》政策解读</h3>
            <div class="interpretation-item-date">2023-07-25</div>
          </div>
          <div class="interpretation-item">
            <h3 class="interpretation-item-title">《濮阳市科技创新驱动高质量发展实施方案》解读</h3>
            <div class="interpretation-item-date">2023-07-05</div>
          </div>
          <div class="interpretation-item">
            <h3 class="interpretation-item-title">《示范区双创扶持办法》实施细则</h3>
            <div class="interpretation-item-date">2023-06-20</div>
          </div>
        </div>
      </section>
    </div>
  </main>
  <Footer></Footer>
</template>

<script setup>
import Header from '@/components/sc_header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/sc_footer/App.vue'
import {ref} from "vue";
import img from '@/assets/img/static/fnpt_zszx.png'

const activeKey = ref(0)

const handleSidebarClick = ( key ) => {
  console.log( key );
  activeKey.value=key
}

</script>

<style scoped>


/* 主要内容区域 */
.main-content {
  padding: 30px 0;
}

/* 搜索区域 */
.search-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.search-title {
  font-size: 24px;
  color: #1e3c72;
  margin-bottom: 20px;
  text-align: center;
}

.search-form {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 16px;
}

.search-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-btn:hover {
  opacity: 0.9;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.filter-btn {
  background: #e2e8f0;
  color: #1e3c72;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 政策分类 */
.policy-section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.section-icon {
  font-size: 28px;
  margin-right: 15px;
  color: #1e3c72;
}

.section-title {
  font-size: 24px;
  color: #1e3c72;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.policy-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.policy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.policy-image {
  height: 160px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 48px;
}

.policy-content {
  padding: 20px;
}

.policy-title {
  font-size: 18px;
  color: #1e3c72;
  margin-bottom: 10px;
  font-weight: 600;
}

.policy-date {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 15px;
}

.policy-desc {
  font-size: 14px;
  color: #475569;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.policy-link {
  display: inline-block;
  color: #4facfe;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.policy-link:hover {
  color: #1e3c72;
  text-decoration: underline;
}

/* 政策解读 */
.interpretation-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.interpretation-title {
  font-size: 20px;
  color: #1e3c72;
  margin-bottom: 20px;
  text-align: center;
}

.interpretation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.interpretation-item {
  padding: 15px;
  border-left: 3px solid #4facfe;
  background: #f8fafc;
}

.interpretation-item-title {
  font-size: 16px;
  color: #1e3c72;
  margin-bottom: 10px;
}

.interpretation-item-date {
  font-size: 12px;
  color: #64748b;
}

</style>